<template>
  <el-row type="flex" justify="center"  >
    <el-col :span="6" :offset="18">
      <el-form  >
        <el-form-item >
          <span style="font-size:38px">欢迎回来</span>&nbsp;&nbsp;&nbsp;
          <span><span>没有账号？</span> <router-link style="color: #409EFF;text-decoration:none" to="/register">前往注册 </router-link> </span>
        </el-form-item>
        <el-form-item >
          <el-input v-model="loginform.account"  placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="loginform.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item >
           <el-button @click="login" type="primary" style="width: 100%;">登录</el-button>
           <p><span>忘记密码？</span> <router-link style="color: #409EFF;text-decoration:none" to="/login">前往重置 </router-link> </p>
        </el-form-item>
        </el-form>
    </el-col>

  </el-row>
</template>

<script>
export default {
    data(){
      return{
        loginform:{
          account:'',
          password:'',
        } 
      }
    },
    methods:{
      login(){
        //用户登录请求
        this.$axios.post('api/user/login',this.loginform)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            //登录成功
            //将用户信息保存到LocalStorage
           localStorage.setItem('userInfo',JSON.stringify(res.data.data.userInfo));
           //将jwt保存
           localStorage.setItem('authorization',res.data.data.jwt);
            //跳转到首页
            this.$router.push('/');
          }else{
            //登录失败
            this.$message({
              message: '账号或密码错误',
              type: 'error'
            });
          }
        })
       
      }
    }
}
</script>

<style scoped>
.el-row{
  /* background: darkslategray; */
  background-image: url('../../assets/login.jpg');
  height: 100%;
}
.el-col{
  background: white;
  padding: 15% 20px;
  border-radius: 2px; /*加圆角 */
}
.el-input{
  margin: 8px 1px;
}
</style>
